<!--
  列表管理页面
  User: 高祥
  Date: 2020-02-14
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="后台服务中心"/>
    <meta content="" name="GaoXiang"/>
    <th:block th:replace="body/head-page :: dva_head_page"/>
    <!-- BEGIN THEME LAYOUT STYLES -->
    <link th:href="@{/metronic/layouts/layout/css/layout.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/metronic/layouts/layout/css/themes/default.css}" rel="stylesheet" type="text/css" id="style_color"/>
    <link th:href="@{/metronic/layouts/layout/css/custom.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/index.css}" rel="stylesheet" type="text/css"/>
    <!-- END THEME LAYOUT STYLES -->
    <style>
        body {
            background-color: #ffffff;
        }
        .page-sidebar-menu{
            min-height: 500px;
        }
        .page-sidebar {
            background-color: #4b5258;
            width: 70%;
        }

    </style>
</head>

<body class="page-content-white  fade-in-up">

<!-- BEGIN CONTAINER -->
<div class="page-container">
    <div class="row">
        <div class="col-md-6">
            <!-- BEGIN PAGE TABLE-->
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-speech  font-blue-hoki"></i>
                        <span class="caption-subject font-blue-hoki">组织结构展示</span>
                        <span class="caption-helper">
                            在此可以管理组织信息，左侧选择组织，右侧进行操作。
                        </span>
                    </div>
                </div>
                <div class="portlet-body">

                    <div class="page-sidebar navbar-collapse collapse">
                        <ul class="page-sidebar-menu " data-keep-expanded="false" data-auto-scroll="false" data-slide-speed="200" >

                            <li class="heading">
                                <h3 class="uppercase"> 组织管理 </h3>
                            </li>
                            <li th:each="data,iterStat : ${list}">
                                <a href="javascript:;" th:id="${data.id}" th:data-id="${data.id}" th:data-parent-id="${data.parentId}" onclick="showChild(this);" class="nav-link ">
                                    <i class="fa fa-cogs "></i>
                                    <span class="title" th:text="${data.name}"> 组织名称 </span>
                                    <span class="arrow"></span>
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- END PAGE TABLE-->
        </div>
        <div class="col-md-6">
            <!-- BEGIN FORM-->
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject font-red-sunglo bold uppercase">组织添加</span>
                        <span class="caption-helper">添加一个组织</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    <!-- BEGIN FORM-->
                    <form action="#" class="form-horizontal" id="save-org-module">
                        <div class="form-body">

                            <div class="form-group">
                                <label class="col-md-3 control-label">上级组织ID</label>
                                <div class="col-md-7">
                                    <div class="input-inline ">
                                        <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-edit"></i>
                                        </span>
                                            <input type="text" disabled id="orgParentId" class="form-control" required name="parentId" placeholder="上级组织ID">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">组织名称</label>
                                <div class="col-md-7">
                                    <div class="input-inline ">
                                        <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-edit"></i>
                                        </span>
                                            <input type="text" class="form-control" required name="name" placeholder="组织名称">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-offset-3 col-md-7">
                                                <button type="button" class="btn green" onclick="saveOrg();">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6"> </div>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- END CONTAINER -->

<th:block th:replace="body/javascript-page :: javascript_page"/>
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script th:src="@{/metronic/layouts/layout/scripts/layout.js}" type="text/javascript"></script>
<script th:src="@{/metronic/layouts/layout/scripts/demo.js}" type="text/javascript"></script>
<script th:src="@{/metronic/layouts/global/scripts/quick-sidebar.js}" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
<script>

    $(document).ready(function () {

    });

    let nowCheck;  //当前选中

    function saveOrg(){
        let param = tools.formParams("save-org-module");
        if(tools.valid("save-org-module")){
            tools.post("/organization/save",param,function(data){
                if(data.success){
                    layer.msg('保存成功', {icon: 1,time:1000},function(){
                        reloadUl(nowCheck);
                    });
                }else{
                    tools.errorTip(data);
                }
            });
        }
    }

    function showChild(obj){
        let id = $(obj).attr("id");
        let parentId = $(obj).data("parentId");
        $("#orgParentId").val(parentId+id+",");
        nowCheck = id;
        reloadUl(id);
    }

    function reloadUl(id){
        let liObj = $("#"+id);
        tools.post("/organization/findByParentId",{"parentId": id + ","},function(data){
            if(data.success){
                console.log(data.data);
                $(liObj).find(".arrow").addClass("open");
                $(liObj).parent().addClass("open");
                $(liObj).after(initChildHtml(id,data.data));
            }else{
                layer.msg("没有下一级了");
            }
        });
    }

    function initChildHtml(id,data){
        let old = $("#ul-"+id);
        if(old){old.remove();}
        let ul = $("<ul  class=\"sub-menu\" id=\"ul-"+id+"\" style=\"display: block\"></ul>");
        for(let liData in data){
            let liStr = "<li>" +
                "                                <a href=\"javascript:;\" id=\""+data[liData].id+"\" data-id=\""+data[liData].id+"\" data-parent-id=\""+data[liData].parentId+"\" onclick=\"showChild(this);\" class=\"nav-link \">" +
                "                                    <i class=\"fa fa-cogs \"></i>" +
                "                                    <span class=\"title\" > "+data[liData].name+" </span>" +
                "                                   <span class=\"arrow \"></span>"+
                "                                </a>" +
                "                            </li>";
            $(liStr).appendTo(ul);
        }
        return ul;
    }

</script>
</body>
</html>